<template>
  <div style="width: 100%; height: 100%">
    <!-- 左侧卡片组件，包含路径规划按钮 -->
    <el-card
      id="card"
      style="position: absolute; top: 50px; left: 50px; z-index: 999; overflow: auto"
    >
      <!-- 路径规划按钮，点击后触发route函数 -->
      <el-button type="primary" @click="route()">路径规划</el-button>
    </el-card>
    <!-- 右侧卡片组件，用于显示路径规划结果 -->
    <el-card
      v-show="isShow"
      style="position: absolute; top: 50px; right: 50px; z-index: 999; overflow: auto"
    >
      <!-- 用于显示路径规划结果的div -->
      <div id="panel"></div>
    </el-card>
    <!-- 地图容器 -->
    <div style="width: 100%; height: 100%" id="map"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import http from "../utils/http"; // 导入http工具，可能用于后续API请求，当前代码未使用

// 声明地图变量
var map;
// 声明一个响应式变量，用于控制右侧卡片组件的显示与隐藏
const isShow = ref(false);

// 组件挂载完成后执行的函数
onMounted(async () => {
  // 初始化地图，设置初始缩放级别和中心点（长沙）
  map = new AMap.Map("map", {
    zoom: 12,
    center: [112.938814, 28.228209], // 长沙的经纬度坐标
  });
});

// 路径规划函数
const route = () => {
  // 创建驾车路径规划实例
  var driving = new AMap.Driving({
    map: map,
    panel: "panel", // 指定路径规划结果显示的容器
  });
  // 创建起点标记
  var start = new AMap.Marker({
    position: [0, 0], // 初始位置设为原点
    title: "起点",
    map: map,
  });
  // 创建终点标记
  var end = new AMap.Marker({
    position: [0, 0], // 初始位置设为原点
    title: "终点",
    map: map,
  });
  // 标记起点和终点是否已设置的标志
  var startFlag = 0;
  var endFlag = 0;
  // 提示用户点击地图设置起点
  ElMessage({
    message: "请点击地图设置起点",
  });
  // 监听地图点击事件
  map.on("click", function (e) {
    // 如果起点未设置，则设置起点并提示用户设置终点
    if (startFlag == 0) {
      start.setPosition(e.lnglat); // 设置起点位置
      startFlag = 1; // 更新起点已设置的标志
      ElMessage({
        message: "请点击地图设置终点",
      });
    } 
    // 如果起点已设置且终点未设置，则设置终点并进行路径规划
    else if (endFlag == 0) {
      end.setPosition(e.lnglat); // 设置终点位置
      endFlag = 1; // 更新终点已设置的标志
      // 执行路径规划查询
      driving.search(start.getPosition(), end.getPosition(), function (status, result) {
        if (status === "complete") {
          console.log("绘制驾车路线完成");
          isShow.value = true; // 显示右侧卡片组件
        } else {
          console.log("获取驾车数据失败：" + result);
        }
      });
    }
  });
};
</script>
<style>
	.sidebar::-webkit-scrollbar23 {
	  width: 0;
	  position: absolute;
	  left: 0;
	  top: 70px;
	  bottom: 0;
	  overflow-y: scroll;
	}
	.sidebar::-webkit-scrollbar31 {
	  width: 0;
	}
	.sidebar::-webkit-scrollbar41 {
	  width: 0;
	  position: absolute;
	  left: 0;
	  top: 70px;
	  bottom: 0;
	  overflow-y: scroll;
	}
</style>